<template>
    <!-- <div class="aniBox" @click="play()"> -->
    <lottie :options="defaultOptions" :height="400" :width="400" v-on:animCreated="handleAnimation" />
    <!-- </div> -->

</template>

<script>

import animationData from '../../assets/like.json';
export default {
    name: 'lottieLike',
    data() {
        return {
            defaultOptions: {
                animationData: animationData,
                autoplay: false,
                loop: false
            },
            animationSpeed: 1,
            anim: {
            }
        }
    },
    methods: {
        handleAnimation(anim) {
            this.anim = anim;
            console.log(anim); //这里可以看到 lottie 对象的全部属性
            this.anim.goToAndStop(40, true)//跳转帧并且停止 默认停止在哪里
        },
        stop: function () {//停止播放
            this.anim.stop();
        },

        play: function () {
            this.anim.goToAndStop(0)//跳转帧并且停止 默认停止在哪里
            this.anim.play()
            // this.anim.setDirection(-1)
        },

        pause: function () {
            this.anim.pause();
        },

        setDirection() {//反向播放
            this.anim.setDirection(-1)
            this.anim.play()
            // 1正向播放
            // -1反向播放
        },
        unsetDirection() {//正向播放
            this.anim.goToAndStop(0)//跳转帧并且停止 默认停止在哪里
            this.anim.setDirection(1)
            this.anim.play()
            // 1正向播放
            // -1反向播放
        },
        gotoandStop() {
            this.anim.goToAndStop(1000, true)
            // 直接跳到某一帧,实现一些步骤的动画
            // 第一个值是基于时间的.true
            // 第一个值是基于帧的:false
            // Anim.goToAndStop(value, isFrame); // 跳到某个时刻/帧并停止。isFrame(默认false)指示value表示帧还是时间(毫秒)
            // Anim.goToAndPlay(value, isFrame); // 跳到某个时刻/帧并从该帧往后进行播放
            // Anim.goToAndStop(30, true); // 跳转到第30帧并停止
            // Anim.goToAndPlay(300); // 跳转到第300毫秒并从300毫秒开始向后播放
        },
        lastFram() {
            this.anim.goToAndStop(0)//跳转帧并且停止 默认停止在哪里
            this.anim.setDirection(1)
            // this.anim.goToAndStop(46, true)
        }
    },
    mounted() {
        this.anim.goToAndStop(0, true)//跳转帧并且停止 默认停止在哪里
        this.anim.addEventListener('complete', () => {
            console.log('动画播放完毕')
        })
        this.anim.addEventListener('data_ready', () => {
            console.log('animation data has loaded');

        })
    }
}
</script>

<style lang="" scoped>
.aniBox {
    height: 100%;
    position: fixed;
    width: 100%;
    z-index: 100000;
    background: white;
    overflow-y: hidden;
    bottom: 0;
    left: 0;
}
.animate {
}
</style>